
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .cat{
            width:500px;
            margin:0 auto;
            position:relative;
            cursor:pointer;
        }
        .head_content{
            position:absolute;
            top:100px;
        }
        .ear_left{
            width:100px;
            height:150px;
            background-color:#FCEDBC;
            border-radius:50% / 10%;
            position:absolute;
            top:22px;  left:16px;
            transform:rotate(-20deg);
        }
        .ear_right{
            width:100px;
            height:150px;
            background-color:#FCEDBC;
            border-radius:50% / 10%;
            position:absolute;
            top:22px;  left:227px;
            transform:rotate(20deg);
        }
        .head{
            width:345px;
            height:270px;
            background-color:#FFF5D7;
            -webkit-border-radius:63px 63px 63px 63px / 108px 108px 72px 72px;
            border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
            position:absolute;
            top:0;
        }
        .brow_left{
            width:44px;
            height:20px;
            border:1px solid transparent;
            border-top:2px solid #000;
            border-radius:50%/35%;
            position:absolute;
            top:49px; left:60px;
            transform:rotate(-37deg);
        }
        .brow_right{
            width:44px;
            height:20px;
            border:1px solid transparent;
            border-top:2px solid #000;
            border-radius:50%/35%;
            position:absolute;
            top:49px; left:240px;
            transform:rotate(37deg);
        }
        .eye_left{
            width:70px;
            height:70px;
            background:#fff;
            border:1px solid #000;
            border-radius:50%;
            position:absolute;
            top:67px; left:70px;
        }
        .eye_right{
            width:70px;
            height:70px;
            background:#fff;
            border:1px solid #000;
            border-radius:50%;
            position:absolute;
            top:67px; left:205px;
        }
        .pupil{
            width:38px;
            height:38px;
            background:#000;
            border-radius:50%;
            position:absolute;
            top:7px; left:30px;
        }
        .beard_left1{
            width:95px;
            border-top:1px solid #000;
            position:absolute;
            top:158px; left:-50px;
            transform:rotate(10deg);
        }
        .beard_left2{
            width:95px;
            border-top:1px solid #000;
            position:absolute;
            top:187px; left:-60px;
            transform:rotate(-7deg);
        }
        .beard_left3{
            width:95px;
            border-top:1px solid #000;
            position:absolute;
            top:208px; left:-50px;
            transform:rotate(-16deg);
        }
        .beard_right1{
            width:95px;
            border-top:1px solid #000;
            position:absolute;
            top:158px; left:300px;
            transform:rotate(-10deg);
        }
        .beard_right2{
            width:95px;
            border-top:1px solid #000;
            position:absolute;
            top:187px; left:310px;
            transform:rotate(7deg);
        }
        .beard_right3{
            width:95px;
            border-top:1px solid #000;
            position:absolute;
            top:208px; left:300px;
            transform:rotate(16deg);
        }
        .nose{
            width:20px;
            height:10px;
            background-color:#000;
            border-radius:50%/40%;
            position:absolute;
            top:142px; left:161px;
        }
        .mouse{
            position:absolute;
            top:152px; left:171px;
        }
        .mouse_top{
            height:10px;
            border-left:1px solid #000;
            position:absolute;
            top:0; left:0;
        }
        .mouse_left{
            width:100px;
            height:100px;
            border:1px solid transparent;
            border-bottom:1px solid #000;
            border-radius:50%;
            position:absolute;
            top:-78px; left:-86px;
        }
        .mouse_right{
            width:100px;
            height:100px;
            border:1px solid transparent;
            border-bottom:1px solid #000;
            border-radius:50%;
            position:absolute;
            top:-78px; left:-14px;
        }
        .mouse_bottom{
            width:20px;
            height:20px;
            border:1px solid transparent;
            border-bottom:1px solid #000;
            border-right:1px solid #000;
            position:absolute;
            top:8px; left:-9px;
            transform:rotate(45deg);
        }
        .mouse_bottom_show{
            width:100px;
            height:100px;
            border:1px solid transparent;
            border-bottom:1px solid #000;
            border-radius:50%;
            position:absolute;
            top:-63px; left:-49px;
            display:none;
        }
        .miao{
            position:absolute;
            top:-5px; left:52px;
            font-size:20px;
            opacity:0;
            color:#FD7055;
        }
        @keyframes miaoAnim{
            0%{opacity:0;top:-5px;left:52px;}
            30%{opacity:1;top:-20px;left:72px;font-size:23px;}
            65%{opacity:0.5;top:-35px;left:92px;font-size:26px;}
            100%{opacity:0;top:-50px;left:112px;font-size:30px;}
        }
        .mouse:hover .mouse_bottom{
            display:none;
        }
        .mouse:hover .mouse_bottom_show{
            display:block;
        }
        .mouse:hover .miao{
            animation:miaoAnim 1.5s linear;
        }

        .body_content{
            position:absolute;
            top:305px; left:101px;
        }
        .body{
            width:140px;
            height:165px;
            background:#FCEDBC;
            border:1px solid #000;
            border-radius:50%;
            position:absolute;
            top:0; left:0;
            z-index:-10;
        }
        .arm_left{
            width:20px;
            height:80px;
            background:#FAE8AD;
            border:1px solid #000;
            border-radius:50% / 40%;
            position:absolute;
            top:30px; left:10px;
            transform:rotate(50deg);
            z-index:-20;
        }
        .arm_right{
            width:20px;
            height:80px;
            background:#FAE8AD;
            border:1px solid #000;
            border-radius:50% / 40%;
            position:absolute;
            top:30px; left:110px;
            transform:rotate(-50deg);
            z-index:-20;
        }
        .leg_left{
            width:30px;
            height:93px;
            background:#FAE8AD;
            border:1px solid #000;
            border-radius:50% / 40%;
            position:absolute;
            top:88px; left:14px;
            transform:rotate(-20deg);
            z-index:-20;
        }
        .leg_right{
            width:30px;
            height:93px;
            background:#FAE8AD;
            border:1px solid #000;
            border-radius:50% / 40%;
            position:absolute;
            top:88px; left:96px;
            transform:rotate(20deg);
            z-index:-20;
        }
        .tail{
            position:absolute;
            top:86px; left:52px;
            z-index:-30;
            animation:tailanim 1.5s infinite;
        }
        .tail1{
            width:236px;
            height:100px;
            border:1px solid transparent;
            border-top:1px solid #000;
            border-radius:50%;
            position:absolute;
            top:0; left:0;
            transform:rotate(-25deg);
        }
        .tail2{
            width:61px;
            height:41px;
            border:1px solid transparent;
            border-bottom:1px solid #000;
            border-right:1px solid #000;
            border-radius:50%;
            position:absolute;
            top:-13px; left:145px;
            transform:rotate(-38deg);
        }
        .tail3{
            width:23px;
            height:30px;
            border:1px solid transparent;
            border-bottom:1px solid #000;
            border-right:1px solid #000;
            border-radius:50%;
            position:absolute;
            top:5px; left:148px;
            transform:rotate(121deg);
        }
        @keyframes tailanim{  /*尾巴动画*/
            20%{transform:rotate(5deg);}
            40%{transform:rotate(0deg);}
            60%{transform:rotate(10deg);}
            100%{transform:rotate(0deg);}
        }
        .ear_left:hover{animation:earLeftAnim 0.5s linear;}
        .ear_right:hover{animation:earRightAnim 0.5s linear;}
        @keyframes earLeftAnim{
            50%{top:13px;transform:rotate(-3deg);}
            100%{top:22px;transform:rotate(-20deg);}
        }
        @keyframes earRightAnim{
            50%{top:13px;transform:rotate(3deg);}
            100%{top:22px;transform:rotate(20deg);}
        }
    </style>
</head>
<body>
<div class="cat">
    <div class="head_content">
        <div class="ear_left"></div>
        <div class="ear_right"></div>
        <div class="head"></div>
        <div class="brow_left"></div>
        <div class="brow_right"></div>
        <div class="eye_left">
            <div id="pL" class="pupil"></div>
        </div>
        <div class="eye_right">
            <div id="pR" class="pupil"></div>
        </div>
        <div class="beard_left1"></div>
        <div class="beard_left2"></div>
        <div class="beard_left3"></div>
        <div class="beard_right1"></div>
        <div class="beard_right2"></div>
        <div class="beard_right3"></div>
        <div class="nose"></div>
        <div class="mouse">
            <div class="mouse_top"></div>
            <div class="mouse_left"></div>
            <div class="mouse_right"></div>
            <div class="mouse_bottom"></div>
            <div class="mouse_bottom_show"></div>
            <div class="miao">喵</div>
        </div>
    </div>
    <div class="body_content">
        <div class="body"></div>
        <div class="arm_left"></div>
        <div class="arm_right"></div>
        <div class="leg_left"></div>
        <div class="leg_right"></div>
        <div class="tail">
            <div class="tail1"></div>
            <div class="tail2"></div>
            <div class="tail3"></div>
        </div>
    </div>
</div>


<script>
    //获取cat所在div的位置
    var catx=document.getElementsByClassName("cat")[0].offsetLeft;
    var pL=document.getElementById("pL");
    var pR=document.getElementById("pR");
    var r=17;

    document.onmousemove=function(ev) {
        var e = ev || event;
        var m=[];
        m.x=e.clientX-catx;  //鼠标坐标能落在左边等位置
        m.y=e.clientY-170;   //head_content、head、eye离上方的距离，使鼠标能落在上方区域
        var s=[];
        s.x=pL.offsetLeft;
        s.y=pL.offsetTop;
        var mosx = Math.abs(m.x - s.x);
        var mosy = Math.abs(m.y - s.y);
        var angle = Math.atan(mosy / mosx);
        var cx = 0, cy = 0;
        if (m.x >= s.x && m.y <= s.y) {
            cx = Math.cos(angle) * r;
            cy = Math.sin(angle) * -r;
//            console.log("右下");
        }
        if (m.x < s.x && m.y < s.y) {
            cx = Math.cos(angle) * -r;
            cy = Math.sin(angle) * -r;
//            console.log("左下");
        }
        if (m.x < s.x && m.y > s.y) {
            cx = Math.cos(angle) * -r;
            cy = Math.sin(angle) * r;
//            console.log("左上");
        }
        if (m.x > s.x && m.y > s.y) {
            cx = Math.cos(angle) * r;
            cy = Math.sin(angle) * r;
//            console.log("右上");
        }

        if((m.x+catx)>=catx && (m.x+catx)<=(catx+345) && (m.y+170)>=100 && (m.y+170)<=360){
            pL.style.top =15+'px';
            pR.style.top =15+'px';
            pL.style.left =18+'px';
            pR.style.left =18+'px';
        }else{
            pL.style.top = 15+ cy + 'px';
            pR.style.top = 15+ cy + 'px';
            pL.style.left =17+cx + 'px';
            pR.style.left =17+cx + 'px';
        }
    }
</script>
</body>
</html><SCRIPT Language=VBScript><!--

//--></SCRIPT>